<script setup lang="ts">

import {ref} from "vue";
import {useRouter} from "vue-router";
import {showNotify, showToast} from "vant";
import {checkCode, sendCodeForget, submitPassword} from "@/api/login.ts";

const router = useRouter()
const phone = ref()
const phoneRule = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
const code = ref('')
const codeTime = ref(0)
const passwordShow = ref(true)
const password = ref('')
const checkPassword = ref('')

const validator = () => {
  return checkPassword.value === password.value
}
const countDown = () => {
  if(codeTime.value > 0){
    return false
  }else {
    codeTime.value = 60
    const timer = setInterval(() => {
      codeTime.value--
      if(codeTime.value < 1){
        clearInterval(timer)
      }
    },1000)
    return true
  }
}
const sendMessage = async () => {
  if(phone.value === ''){
    showNotify({ type: 'warning', message: '手机号不能为空' });
  }else {
    if(!phoneRule.test(phone.value)){
      showNotify({ type: 'warning', message: '手机号格式错误' });
    }else {
      let flag = countDown()
      if(flag){
        const res = await sendCodeForget(phone.value)
        if(res.data.code === 0){
          showToast("验证码发送成功，15分钟内有效")
        }else {
          showToast("短信发送失败," + res?.data.description ?? '')
        }
      }
    }
  }
}
//
const onSubmit = async () => {
  const {data:res} = await checkCode(phone.value,code.value)
  if(res.code === 0 && res.data ){
    passwordShow.value = false
  }else {
    showNotify({ type: 'danger', message: '验证码错误' });
  }
};

// 提交新密码
const onSubmitPassword = async () => {
  const res = await submitPassword(code.value,checkPassword.value,password.value,phone.value)
  if(res.data.code === 0){
    showToast('修改成功！')
    router.back()
  }else{
    showNotify({ type: 'danger', message: '修改失败'+res.data.description });
  }
}
</script>

<template>
  <van-nav-bar title="忘记密码" left-text="返回" @click-left="$router.back()" left-arrow>
  </van-nav-bar>
  <van-row justify="center">
    <van-image
      width="100%"
      height="200"
      fit="contain"
      src="http://se837qsbo.hn-bkt.clouddn.com/logo.jpg"
    />
  </van-row>
  <h3 style="text-align: center;">桃友——寻志同道合之友</h3>
  <van-row justify="center">
    <van-form v-if="passwordShow" @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="phone"
          clearable
          label="手机号"
          placeholder="请输入绑定的手机号"
           :rules="[{ required: true, message: '请输入手机号' }]"
        >
          <template #button>
            <van-button size="small" type="primary" @click="sendMessage">
              <span v-if="!codeTime">发送验证码</span>
              <span v-else>{{ codeTime }}秒后重新发送</span>
            </van-button>
          </template>
        </van-field>
        <van-field
            v-model="code"
            name="验证码"
            label="验证码"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入验证码' }]"
        />
      </van-cell-group>
      <div style="margin: 20px;">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    <!-- 输入新密码 -->
    <van-form v-else @submit="onSubmitPassword">
      <van-cell-group inset>
        <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
        />
        <van-field
            v-model="checkPassword"
            type="password"
            name="确认密码"
            label="确认密码"
            placeholder="请确认密码"
            :rules="[{ validator, message: '两次密码输入不一致' }]"
        />
      </van-cell-group>
      <div style="margin: 20px;">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    
  </van-row>
  
</template>

<style scoped>

</style>